<template>
	<!-- 确定订单 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="确定订单" />
		<!-- 商品信息 -->
		<view class="title">商品信息</view>
		<view class="goods">
			<view class="paygoods">
				<image :src="orderInfo.cover_image" class="paygoods_pic"></image>
				<view class="paygoodsinfo">
					<view class="paygoodsinfo_title">{{orderInfo.goods_name}}</view>
					<view class="paygoodsinfo_spec" v-if="orderInfo.color!='' && orderInfo.ram!=''">已选规格：{{orderInfo.color}}/{{orderInfo.ram}}</view>
					<view class="paygoodsinfo_price" v-if="!orderInfo.point_price || Number(orderInfo.point_price)<=0">
						<text>￥{{orderInfo.price}}</text>
						<text style="font-size: 24rpx;">x{{orderInfo.num}}</text>
					</view>
					<view class="paygoodsinfo_integral" v-else>
						<view class="integrals">
							<view class="integral">
								<image src="/static/images/mall/integralicon.png"></image>
								{{orderInfo.point_price}}
							</view>
							<text v-if="Number(orderInfo.price)>0" class="add">+</text>
							<view class="price" v-if="Number(orderInfo.price)>0">￥{{orderInfo.price}}</view>
						</view>
						<text style="font-size: 24rpx;">x{{orderInfo.num}}</text>
					</view>
				</view>
			</view>
			<view class="payinfo" v-if="!orderInfo.total_price_point || Number(orderInfo.total_price_point)<=0">
				<view class="payinfo_title">商品总金额</view>
				<text>￥{{orderInfo.total_price}}</text>
			</view>
			<view class="payinfo" v-else>
				<view class="payinfo_title">商品总金额</view>
				<view class="payinfo_integral">
					<view class="integrals">
						<view class="integral">
							<image src="/static/images/mall/integralicon.png"></image>
							{{orderInfo.total_price_point}}
						</view>
						<text v-if="Number(orderInfo.total_price)>0" class="add">+</text>
						<view class="price" v-if="Number(orderInfo.total_price)>0">￥{{orderInfo.total_price}}</view>
					</view>
				</view>
			</view>
			<view class="payinfo">
				<view class="payinfo_title">运费</view>
				<text v-if="Number(orderInfo.freight_price)>0">￥{{orderInfo.freight_price}}</text>
				<text v-else>包邮</text>
			</view>
			<view class="payinfo">
				<view class="payinfo_title">合计应支付</view>
				<text>￥{{orderInfo.total_price1}}</text>
			</view>
			<view class="line"></view>
			<view class="payinfo">
				<view class="payinfo_title">优惠券</view>
				<navigator class="payinfo_text" style="justify-content: flex-end;" :url="`/pages/mine/coupon/availableCoupon?amount=${orderInfo.total_price}`" v-if="JSON.stringify(coupon)=='{}'">
					<text v-if="couponList.length===0" @click.stop>暂无可用优惠券</text> 
					<text v-else>选择优惠券</text>
				</navigator>
				<navigator class="payinfo_text" :url="`/pages/mine/coupon/availableCoupon?amount=${orderInfo.total_price1}`" v-if="JSON.stringify(coupon)!='{}'">
					<view class="payinfo_text_coupon">{{coupon.price}}元优惠券 <text style="color: #FF0000;">-￥{{coupon.price}}</text></view>
				</navigator>
			</view>
			<view class="line"></view>
			<view class="payinfo">
				<view class="payinfo_title">还需要支付</view>
				<text>￥{{payableMoney}}</text>
			</view>
		</view>
		<!-- 收件人信息 -->
		<view class="addedit" v-if="JSON.stringify(this.addressInfo) !=='{}' || defaultAddressInfo.length>0">
			<view class="title">收件人信息</view>
			<view class="edit" @click="addConsignee">
				<text>修改</text>
				<image src="/static/images/mall/more_address.png"></image>
			</view>
		</view>
		<view class="title" v-else>收件人信息</view>
		<view class="consignee">
			<view v-if="defaultAddressInfo.length>0 && JSON.stringify(this.addressInfo) ==='{}'">
				<view class="consignee_info" @click="addConsignee">
					<view class="consignee_info_name">{{defaultAddressInfo[0].contact_name}}</view>
					<view class="consignee_info_phone">{{defaultAddressInfo[0].contact_phone}}</view>
				</view>
				<view class="consignee_address">{{defaultAddressInfo[0].province}}{{defaultAddressInfo[0].city}}{{defaultAddressInfo[0].district}}{{defaultAddressInfo[0].address}}</view>
			</view>
			<view v-else>
				<view class="consignee_add" v-if="JSON.stringify(addressInfo)=='{}'" @click="addConsignee">添加收货人</view>
				<view class="consignee_info" v-if="JSON.stringify(addressInfo)!='{}'">
					<view class="consignee_info_name">{{addressInfo.contact_name}}</view>
					<view class="consignee_info_phone">{{addressInfo.contact_phone}}</view>
				</view>
				<view class="consignee_address" v-if="JSON.stringify(addressInfo)!='{}'">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}{{addressInfo.address}}</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="title">支付方式</view>
		<view class="paytype">
			<view class="paytype_item" @click="payActive=1">
				<image src="/static/images/mall/paychecked.png" v-if="payActive === 1" class="paytype_item_check"></image>
				<image src="/static/images/mall/paycheck.png" v-else class="paytype_item_check"></image>
				<image src="/static/images/mall/alipay.png" class="paytype_item_icon"></image>
				<text>支付宝支付</text>
			</view>
			<view class="paytype_item" @click="payActive=2">
				<image src="/static/images/mall/paychecked.png" v-if="payActive === 2" class="paytype_item_check"></image>
				<image src="/static/images/mall/paycheck.png" v-else class="paytype_item_check"></image>
				<image src="/static/images/mall/wechat.png" class="paytype_item_icon"></image>
				<text>微信支付</text>
			</view>
		</view>
		<view class="paybtn">
			<view class="paybtn_text">
				<view class="paybtn_text_top">
					总计：<text>￥{{payableMoney}}</text>
				</view>
			</view>
			<view class="paybtn_btn" @click="payBefore">立即支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressInfo:{},//地址信息
				defaultAddressInfo:[],//默认地址信息
				payableMoney: 0, //应支付金额
				couponDeduction: 0, //优惠券抵扣金额
				isDeduction: false, //是否选择优惠券抵扣
				couponList:[],//可用优惠券列表
				coupon:{},//选中的优惠券信息
				payActive:0,//当前选中的支付方式 1支付宝 2微信
				allowTap:true,//防误触
				goods_id:0,//商品id
				goods_spec_id:0,//规格id
				num:1,//购买数量
				goodsType:1,//商品类型 1普通 2积分
				orderInfo:{},//订单信息
				activity_id:''//盲盒活动id
			}
		},
		onLoad(options) {
			console.log("options: ",options);
			this.goods_id = options.goods_id;
			this.goods_spec_id = options.goods_spec_id;
			this.num = options.num;
			if(options.goodsType && options.goodsType!=undefined){
				this.goodsType = options.goodsType;
			}
			if(this.goodsType == 2){
				this.getShopbuypgoodsa();
			}else{
				this.getShopbuygoodsa();
			}
			
			this.init();
		},
		onShow() {
			let page = getCurrentPages();
			let curPage = page[page.length - 1];
			if(curPage.$vm.addressInfo){
				this.addressInfo = curPage.$vm.addressInfo;
			}
			if (curPage.$vm.coupon && JSON.stringify(curPage.$vm.coupon)!='{}') {
				this.coupon = curPage.$vm.coupon;
				console.log(this.coupon)
				this.couponDeduction = this.coupon.price;
				let money = (this.orderInfo.total_price1 - Number(this.couponDeduction));
				if(money>0){
					this.payableMoney = money;
				}else{
					this.payableMoney = 0;
				}
			}
		},
		methods: {
			init(){
				this.$api.addresslist().then(res=>{
					this.defaultAddressInfo = res.filter(item => item.is_master == 1);
				})
			},
			//普通商品下单
			getShopbuygoodsa(){
				this.$api.shopbuygoodsa({
					goods_id:this.goods_id,
					goods_spec_id:this.goods_spec_id,
					num:this.num
				}).then(res=>{
					console.log("普通商品: ",res);
					this.orderInfo = res;
					this.payableMoney = (this.orderInfo.total_price1 - this.couponDeduction).toFixed(2);
					this.getCouponList();
				})
			},
			//积分商品下单
			getShopbuypgoodsa(){
				this.$api.shopbuypgoodsa({
					goods_id:this.goods_id,
					goods_spec_id:this.goods_spec_id,
					num:this.num
				}).then(res=>{
					console.log("积分商品: ",res);
					this.orderInfo = res;
					this.payableMoney = (this.orderInfo.total_price1 - this.couponDeduction).toFixed(2);
					this.getCouponList();
				})
			},
			//获取可用优惠券列表
			getCouponList(){
				console.log(this.orderInfo.total_price);
				this.$api.shopcouponlist({
					pay:this.orderInfo.total_price
				}).then(res=>{
					console.log("可用优惠券列表: ",res);
					this.couponList = res;
				})
			},
			//添加收货人
			addConsignee() {
				uni.navigateTo({
					url: '/pages/mine/addressManagement/addressManagement'
				})
			},
			showToast(msg) {
				uni.showToast({
					title:msg,
					icon:'none'
				})
			},
			//支付前
			payBefore(){
				if(JSON.stringify(this.defaultAddressInfo)=='[]' && JSON.stringify(this.addressInfo)=='{}'){
					this.showToast('请添加收货人');
					return
				}
				let pay_type = this.payActive;
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},3000)
				let users_address_id = '';
				if(JSON.stringify(this.addressInfo)=='{}'){
					users_address_id = this.defaultAddressInfo[0].id;
				} else {
					users_address_id = this.addressInfo.id;
				}
				console.log('支付金额',this.payableMoney);
				//生成订单
				if(this.goodsType == 2){
					if(this.payableMoney == 0){
						//积分商品下单（金额为0）
						this.$api.shopbuypgoodsc({
							pay_type,
							goods_id:this.goods_id,
							goods_spec_id:this.goods_spec_id,
							goods_num:this.num,
							coupon_id:this.coupon.id,
							balance:0,
							price:this.payableMoney,
							users_address_id,
							point_price:this.orderInfo.point_price
						}).then(res=>{
							console.log("普通商品下单金额为0: ",res);
							uni.hideLoading();
							uni.showToast({
								title:'下单成功',
								icon:'success'
							})
							setTimeout(()=>{
								uni.setStorage({
									key:'order_type',
									data:'3',
									success: (res) => {
										uni.redirectTo({
											url: '/pages/mine/orderManagement/orderManagement'
										})
									}
								})
							},1500)
						})
					}else{
						//积分商品下单（金额大于0）
						this.$api.shopbuypgoodsb({
							pay_type,
							goods_id:this.goods_id,
							goods_spec_id:this.goods_spec_id,
							goods_num:this.num,
							coupon_id:this.coupon.id,
							balance:0,
							price:this.payableMoney,
							users_address_id,
							point_price:this.orderInfo.point_price
						}).then(res=>{
							console.log('支付信息',res);
							//支付
							this.goPay(pay_type,res);
						})
					}
				}else{
					if(this.payableMoney == 0){
						//普通商品下单（金额为0）
						this.$api.shopbuygoodsc({
							pay_type,
							goods_id:this.goods_id,
							goods_spec_id:this.goods_spec_id,
							goods_num:this.num,
							coupon_id:this.coupon.id,
							balance:0,
							price:this.payableMoney,
							users_address_id
						}).then(res=>{
							console.log("普通商品下单金额为0: ",res);
							uni.hideLoading();
							uni.showToast({
								title:'下单成功',
								icon:'success'
							})
							setTimeout(()=>{
								uni.setStorage({
									key:'order_type',
									data:'2',
									success: (res) => {
										uni.redirectTo({
											url: '/pages/mine/orderManagement/orderManagement'
										})
									}
								})
							},1500)
						})
					}else{
						//普通商品下单（金额大于0）
						this.$api.shopbuygoodsb({
							pay_type,
							goods_id:this.goods_id,
							goods_spec_id:this.goods_spec_id,
							goods_num:this.num,
							coupon_id:this.coupon.id,
							balance:0,
							price:this.payableMoney,
							users_address_id
						}).then(res=>{
							console.log('支付信息',res);
							//支付
							this.goPay(pay_type,res);
						})
					}
				}
			},
			//去支付
			goPay(pay_type,payInfo){
				uni.showLoading({
					title:'支付中...'
				})
				if(pay_type==2){
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('wxpay') != -1) {
								uni.requestPayment({
									provider: "wxpay", 
									orderInfo: payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.showToast({
											title:'支付成功',
											icon:'success'
										})
										if(this.goodsType==2){
											setTimeout(()=>{
												uni.setStorage({
													key:'order_type',
													data:'3',
													success: (res) => {
														uni.redirectTo({
															url: '/pages/mine/orderManagement/orderManagement'
														})
													}
												})
											},1500)
										}else{
											setTimeout(()=>{
												uni.setStorage({
													key:'order_type',
													data:'2',
													success: (res) => {
														uni.redirectTo({
															url: '/pages/mine/orderManagement/orderManagement'
														})
													}
												})
											},1500)
										}
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title:'支付失败，请重试',
											icon:'none'
										})
										if(this.goodsType==2){
											setTimeout(()=>{
												uni.setStorage({
													key:'order_type',
													data:'3',
													success: (res) => {
														uni.redirectTo({
															url: '/pages/mine/orderManagement/orderManagement'
														})
													}
												})
											},1500)
										}else{
											setTimeout(()=>{
												uni.setStorage({
													key:'order_type',
													data:'2',
													success: (res) => {
														uni.redirectTo({
															url: '/pages/mine/orderManagement/orderManagement'
														})
													}
												})
											},1500)
										}
									}
								})
							}
						}
					})
				}else{
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('alipay') != -1) {
								uni.requestPayment({
									"provider": "alipay", 
									"orderInfo": payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.showToast({
											title:'支付成功',
											icon:'success'
										})
										if(this.goodsType==2){
											setTimeout(()=>{
												uni.setStorage({
													key:'order_type',
													data:'3',
													success: (res) => {
														uni.redirectTo({
															url: '/pages/mine/orderManagement/orderManagement'
														})
													}
												})
											},1500)
										}else{
											setTimeout(()=>{
												uni.setStorage({
													key:'order_type',
													data:'2',
													success: (res) => {
														uni.redirectTo({
															url: '/pages/mine/orderManagement/orderManagement'
														})
													}
												})
											},1500)
										}
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title:'支付失败，请重试',
											icon:'none'
										})
										if(this.goodsType==2){
											setTimeout(()=>{
												uni.setStorage({
													key:'order_type',
													data:'3',
													success: (res) => {
														uni.redirectTo({
															url: '/pages/mine/orderManagement/orderManagement'
														})
													}
												})
											},1500)
										}else{
											setTimeout(()=>{
												uni.setStorage({
													key:'order_type',
													data:'2',
													success: (res) => {
														uni.redirectTo({
															url: '/pages/mine/orderManagement/orderManagement'
														})
													}
												})
											},1500)
										}
									}
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	padding-top: calc(var(--status-bar-height) + 100rpx);
	padding-bottom: 130rpx;
}
.title{
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
	margin: 40rpx 0 25rpx 30rpx;
}
.addedit{
	@include between;
}
.edit{
	@include align-center;
	margin-right: 30rpx;
	
	text{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FF6407;
	}
	image{
		width: 12rpx;
		height: 24rpx;
		margin-left: 16rpx;
	}
}
.goods{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx;
	margin: 0 auto;
}
.paygoods{
	display: flex;
	
	&_pic{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}
	.paygoodsinfo{
		width: 500rpx;
		height: 160rpx;
		margin-left: 30rpx;
		@include column-between;
		
		&_title{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			@include one;
		}
		&_spec{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			@include one;
		}
		&_price{
			@include between;
			
			text{
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
		&_integral{
			@include between-end;
			
			.integrals{
				@include align-center;
			}
			.integral{
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FF7000;
				@include align-center;
				
				image{
					width: 34rpx;
					height: 34rpx;
					margin-right: 18rpx;
				}
			}
			.add{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin: 0 20rpx;
			}
			.price{
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FE3E46;
			}
		}
	}
}
.payinfo{
	@include between;
	margin-top: 30rpx;
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #333333;
	
	&_text{
		@include between;
		width: 420rpx;
		
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
		}
		&_icon{
			@include align-center;
			
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
		&_coupon{
			width: 450rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			@include between;
		}
		&_more{
			width: 12rpx;
			height: 24rpx;
		}
	}
	&_integral{
		@include between-end;
		
		.integrals{
			@include align-center;
		}
		.integral{
			@include align-center;
			
			image{
				width: 34rpx;
				height: 34rpx;
				margin-right: 18rpx;
			}
		}
		.add{
			margin: 0 20rpx;
		}
	}
}
.line{
	width: 630rpx;
	height: 1rpx;
	background: #E5E5E5;
	margin: 30rpx auto;
}
.consignee {
	width: 690rpx;
	background-color: $white;
	border-radius: 10rpx;
	margin: 0 auto;
	padding: 30rpx;

	&_add {
		width: 220rpx;
		height: 80rpx;
		background: #FFFFFF;
		border: 2rpx solid #FF6408;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FF6408;
		@include center;
		margin: 36rpx auto;
	}

	&_info {
		@include align-center;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;

		&_name {
			@include one;
		}

		&_phone {
			margin-left: 80rpx;
		}

		image {
			width: 14rpx;
			height: 25rpx;
			margin-left: 10rpx;
		}
	}

	&_address {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin-top: 24rpx;
	}
}
.paytype{
	width: 690rpx;
	background-color: $white;
	border-radius: 10rpx;
	margin: 0 auto;
	padding: 30rpx;
	
	&_item{
		@include align-center;
		margin-top: 30rpx;
		
		&:first-child{
			margin-top: 0;
		}	
		&_check{
			width: 36rpx;
			height: 36rpx;
		}
		&_icon{
			width: 40rpx;
			height: 40rpx;
			margin: 0 20rpx;
		}
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
	}
	&_balance{
		margin-top: 30rpx;
		@include between;
		
		&_left{
			@include align-center;
			
			&_check{
				width: 36rpx;
				height: 36rpx;
			}
			&_icon{
				width: 40rpx;
				height: 40rpx;
				margin: 0 20rpx;
			}
			text{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
		&_right{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			
			text{
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF1200;
				margin-left: 16rpx;
			}
		}
	}
}
.paybtn{
	width: 750rpx;
	height: 112rpx;
	background: #FFFFFF;
	padding: 0 30rpx;
	@include between;
	position: fixed;
	bottom: 0;
	z-index: 999;
	
	&_text{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		
		&_top{
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #1D1D1D;
			
			text{
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF1200;
			}
		}
		&_bot{
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #1D1D1D;
			
			text{
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF1200;
			}
		}
		
	}
	&_btn{
		width: 280rpx;
		height: 70rpx;
		background: linear-gradient(#FFBA00,#FE2E1C);
		border-radius: 35rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
	}
}
</style>
